<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="jquery-1.11.2.min.js"></script>

    <style>
      body {
        padding: 0px;
        margin: 0px;
      }
    </style>
  </head>

  <body onselectstart="return false" width="100%" height="100%">
    <!-- <img id="desktop" width="100%" height="100%" /> -->
    <canvas id="desktop" width="1200px" height="800px"></canvas>
  </body>
  <script>
    var wsImpl = window.WebSocket || window.MozWebSocket;
    var ws = new wsImpl("ws://192.168.1.70:10086/");
    var _canvas = document.getElementById("desktop");
    var _ctx = _canvas.getContext("2d");
    _canvas.width = window.innerWidth;
    _canvas.height = window.innerHeight;
    var image = new Image();
    ws.onmessage = function (evt) {
      //第一种方法：直接设置图片路径
      // var image = document.getElementById("desktop");
      // image.src = URL.createObjectURL(evt.data) ;
      //第二种方法：设置canvas 通过二进制图片方式

      image.src = URL.createObjectURL(evt.data);
      image.onload = function () {
        _ctx.drawImage(image, 0, 0);
        var imagedata = _ctx.getImageData(0, 0, 1200, 1200);
        _ctx.createImageData(imagedata);
      };
      //第三种方法：
      // var imageData = _ctx.createImageData(1200, 800);
      // imageData.data.set(evt.data);
      // _ctx.putImageData(imageData, 0, 0);
    };

    // $(window).keypress(function (event) {
    //   //键按下的时候
    // });

    var shift_press = "false";
    var ctrl_press = "false";
    var alt_press = "false";

    $(window).keydown(function (event) {
      if (event.ctrlKey) {
        ctrl_press = "true";
      } else {
        ctrl_press = "false";
      }
      if (event.shiftKey) {
        shift_press = "true";
      } else {
        shift_press = "false";
      }
      if (event.altKey) {
        alt_press = "true";
      } else {
        alt_press = "false";
      }
      if (event.key != "Shift" && event.key != "Ctrl" && event.key != "Alt") {
        ws.send(
          "{'action':'keydown','key':" +
            event.keyCode +
            ",'shift':" +
            shift_press +
            ",'ctrl':" +
            ctrl_press +
            ",'alt':" +
            alt_press +
            "}"
        );
      }
    });
    $(window).keyup(function (event) {
      if (event.ctrlKey) {
        ctrl_press = "true";
      } else {
        ctrl_press = "false";
      }
      if (event.shiftKey) {
        shift_press = "true";
      } else {
        shift_press = "false";
      }
      if (event.altKey) {
        alt_press = "true";
      } else {
        alt_press = "false";
      }
      if (event.key != "Shift" && event.key != "Ctrl" && event.key != "Alt") {
        ws.send(
          "{'action':'keyup','key':" +
            event.keyCode +
            ",'shift':" +
            shift_press +
            ",'ctrl':" +
            ctrl_press +
            ",'alt':" +
            alt_press +
            "}"
        );
      }
    });

    $(desktop).mousemove(function (e) {
      var _x = e.offsetX;
      var _y = e.offsetY;

      ws.send("{'action':'mousemove','x':'" + _x + "','y':'" + _y + "'}");
    });

    $(desktop).contextmenu(function (e) {
      e.returnValue = false;
      var _x = e.offsetX;
      var _y = e.offsetY;

      ws.send("{'action':'rightclick','x':'" + _x + "','y':'" + _y + "'}");
    });

    $(desktop).mousedown(function (e) {
      ws.send(
        "{'action':'mousedown','x':'" + e.offsetX + "','y':'" + e.offsetY + "'}"
      );
    });

    $(desktop).mouseup(function (e) {
      ws.send(
        "{'action':'mouseup','x':'" + e.offsetX + "','y':'" + e.offsetY + "'}"
      );
    });

    $(desktop).click(function (e) {
      ws.send(
        "{'action':'click','x':'" + e.offsetX + "','y':'" + e.offsetY + "'}"
      );
    });

    $(desktop).dblclick(function (e) {
      ws.send(
        "{'action':'dbclick','x':'" + e.offsetX + "','y':'" + e.offsetY + "'}"
      );
    });

    document.oncontextmenu = function () {
      event.returnValue = false;
    };
  </script>
</html>
